<template>
    <div>
        <div class="plate_head">
            <h1>通知管理</h1>
            <span>通知标题</span>
            <input type="text"></input>
            <Button type="primary" id="search">查询</Button>
            <Button type="primary" id="search_all">查询所有</Button>
        </div>
        <Table :columns="columns1" :data="data1">

        </Table>
        <div>
            <Drawer :closable="false" width="940" v-model="value4">
                <div id="remarks">
                    <Table border ref="selection" :columns="columns2" :data="data2">
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="error" size="small" @click="remove_remark(index)">Delete</Button>
                        </template>
                    </Table>
                    <Button @click="handleSelectAll(true)">全部选择</Button>
                    <Button @click="handleSelectAll(false)">取消全选</Button>
                    <Button @click="remove_allRemark(index)">全部删除</Button>
                </div>
            </Drawer>
        </div>
    </div>
</template>
<script>

    export default {
        data () {
            return {
                value1: '1',
                value4: false,
                pStyle: {
                    fontSize: '16px',
                    color: 'rgba(0,0,0,0.85)',
                    lineHeight: '24px',
                    display: 'block',
                    marginBottom: '16px'
                },
                columns1: [
                    {
                        title: '标题',
                        key: 'title',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '内容',
                        key: 'message'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 300,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.value4 = true;
                                        }
                                    }
                                }, '查看详情'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除通知')
                            ]);
                        }
                    }
                ],
                data1: [
                    {
                        name: 'John Brown',
                        createTime: '2020-07-07 :11:48',
                        message: 'New York No. 1 Lake Park'
                    },
                    {
                        name: 'Jim Green',
                        createTime: '2020-07-07 :11:48',
                        message: 'London No. 1 Lake Park'
                    },
                    {
                        name: 'Joe Black',
                        createTime: '2020-07-07 :11:48',
                        message: 'Sydney No. 1 Lake Park'
                    },
                    {
                        name: 'Jon Snow',
                        createTime: '2020-07-07 :11:48',
                        message: 'Ottawa No. 2 Lake Park'
                    }
                ],
                columns2: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        width: 120,
                        key: 'title'
                    },
                    {
                        title: '内容',
                        key: 'message'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data2: [
                    {
                        title: 'John Brown',
                        message: 'New York No. 1 Lake Park',
                    },
                    {
                        title: 'Jim Green',
                        message: 'London No. 1 Lake Park',
                    },
                    {
                        title: 'Joe Black',
                        message: 'Sydney No. 1 Lake Park',
                    },
                    {
                        title: 'Jon Snow',
                        message: 'Ottawa No. 2 Lake Park',
                    }
                ]
            }
        },
        methods: {
            remove (index) {
                this.data1.splice(index, 1);
            },
            remove_remark(index) {
              this.data2.splice(index,1);
            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            remove_allRemark(index){
                this.data2 = [];
            }
        },
    }

</script>
<style>
    .demo-drawer-profile{
        font-size: 14px;
    }
    .demo-drawer-profile .ivu-col{
        margin-bottom: 12px;
    }
    .plate_head{
        margin-bottom: 20px;
    }
    .plate_head span{
        font-size: 14px;
    }
    .plate_head input{
        height: 36px;
        width: 400px;
        margin: 0 20px;
        border:1px solid #000000;
        font-size: 18px;
        text-indent: 1em;
        border-radius: 6px;
        outline: unset;
    }
    .plate_head button{
        margin: 0 2px;
    }
    #remarks button{
        margin: 0 5px;
    }
    #remarks button:nth-child(2),#remarks button:nth-child(3),#remarks button:nth-child(4){
        margin-top: 10px;
    }
</style>
